<template>
	<view class="detail-box">
		<swiper indicator-dots autoplay circular class="swiper-box">
			<swiper-item v-for="item in detail.exhibit" :key="item.index">
				<image class="swiper-image" :src="item" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		<view class="shopping-info-box">
			<view class="shopping-price">
				<text class="price">￥{{detail.price}}</text>
				<text class="pre-price">￥{{detail.marketprice}}</text>
			</view>
			<view class="shopping-title">
				<text>{{detail.title}}</text>
			</view>
			<view class="area-time">
				<text>{{detail.city}}</text>
				<text>更新至:{{detail.updatetime}}</text>
			</view>
		</view>
		<view class="material-box">
			<view class="material">
				<text>材料</text>
				<text>{{detail.subject}}</text>
			</view>
			<view class="guarantee">
				<text>保障</text>
				<text>闪速退款</text>
				<text>正品保障</text>
			</view>
		</view>
		<view class="shopping-hospital">
			<view class="shop-hos-left">
				<image :src="detail.hospital_logo"></image>
				<text>{{detail.companyname}}</text>
			</view>
			<text class="shop-hos-right">点击进入机构></text>
		</view>
		<view class="detail-content">
			<rich-text :nodes="detail.content"></rich-text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				detail:{}
			}
		},
		methods: {
			async getShoppingDetail(callback){
				const res = await this.$myRequest({
					url:'/index.php?m=app&c=shopping&a=app_shopping_detail&id='+this.id
				})
				this.detail = res.data.data
			},
		},
		onLoad(options) {
			this.id = options.id
			this.getShoppingDetail()
		}
	}
</script>

<style>
	.swiper-box{
		width: 100%;
		height: 240px;
		text-align: center;
		/* overflow: hidden; */
	}
	/* .swiper-image{
		width: 100%;
	} */
	
	.shopping-info-box{
		margin: 10px auto;
		padding: 10px;
	}
	
	.shopping-price .price{
		font-size: 20px;
		margin-right: 10px;
		color: #f6630a;
	}
	.shopping-price .pre-price{
		text-decoration: line-through;
		color: #989898;
	}
	.shopping-title{
		margin: 5px;
	}
	.area-time{
		display:flex;
		justify-content: space-between;
		font-size: 14px;
		color: #989898;
		margin: 10px auto;
	}
	
	.material-box{
		border-top:5px solid #f4f4f4;
		border-bottom: 5px solid #F4F4F4;
		padding: 10px;
	}
	.material{
		margin-bottom: 10px;
	}
	.material text:nth-child(2){
		margin-left: 10px;
		background-color: #ebf5ff;
		font-size: 12px;
		padding: 5px;
		border-radius: 5px;
	}
	.guarantee text{
		margin-right: 10px;
	}
	.guarantee text:nth-child(2),.guarantee text:nth-child(3){
		font-size: 14px;
	}
	
	.shopping-hospital{
		border-bottom: 5px solid #F4F4F4;
		padding: 10px;
		display: flex;
		justify-content: space-between;
	}
	.shopping-hospital .shop-hos-left image{
		width: 20px;
		height: 20px;
		border-radius: 50%;
		vertical-align: middle;
	}
	
	.shopping-hospital .shop-hos-left text{
		margin-left: 10px;
		font-size: 16px;
	}
	.shopping-hospital .shop-hos-right{
		text-align: right;
		font-size: 14px;
	}
	.detail-content{
		padding: 10px;
	}
	
</style>
